<template>
  <div>
    <wapHeader></wapHeader>
    <div class="wapmain">
      <h1>{{$t('vr.accoandpass')}}</h1>
      <ul class="infoUl">
        <li>
          <span>{{$t('vr.oldpassword')}}</span>
          <input v-model="oldPassword" type="password" />
          <!-- <img class="ico" src="../../../../assets/wapimgs/jian.png" alt /> -->
        </li>
        <li>
          <span>{{$t('vr.newpassword')}}</span>
          <input v-model="newPassword" type="password" />
          <!-- <img class="ico" src="../../../../assets/wapimgs/jian.png" alt /> -->
        </li>
        <li>
          <span>{{$t('vr.confirmpassword')}}</span>
          <input v-model="confrimPassword" type="password" />
          <!-- <img class="ico" src="../../../../assets/wapimgs/jian.png" alt /> -->
        </li>
      </ul>
      <button class="btn" @click="submitFun">{{$t('vr.complete')}}</button>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState, mapMutations } from "vuex";
import wapHeader from "../common/back.vue";
import md5 from 'md5';
export default {
  components: {
    wapHeader
  },
  data() {
    return {
      oldPassword: "",
      newPassword: "",
      confrimPassword: ""
    };
  },
  computed: {
    ...mapState(["lang"])
  },
  mounted() {},
  methods: {
    ...mapMutations(["saveloginInfo"]),
    submitFun() {
      if (!this.oldPassword) {
        this.$message({
          message: this.$t("vr.poldpass"),
          type: "warning"
        });
        return;
      }
      if (!this.newPassword) {
        this.$message({
          message: this.$t("vr.pnewpass"),
          type: "warning"
        });
        return;
      }
      // 正则判断
      let regExp = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$~`%^&*()_+=-?/<>,.|])(.{8,20})$/;
      if (!regExp.test(this.newPassword)) {
        this.$message({
          message:
            this.lang == "en"
              ? "The password is more than 8 digits and consists of letters, numbers and symbols":this.lang=='de'?
              "Das Passwort ist mehr als acht Ziffern und besteht aus Buchstaben, Zahlen und Symbolen":"密码8位以上并且由数字，字母和符号三种组成",
          type: "warning"
        });
        return;
      }
      if (!this.confrimPassword) {
        this.$message({
          message: this.$t("vr.psurepass"),
          type: "warning"
        });
        return;
      }
      if (this.newPassword !== this.confrimPassword) {
        this.$message({
          message: this.$t("vr.psamepass"),
          type: "warning"
        });
        return;
      }
      this.getmodify();
    },

    async getmodify() {
      const params = {
        oldPassword: md5(this.oldPassword),
        newPassword: md5(this.newPassword)
      };
      const res = await api.getmodify(params);
      this.$message({
        message: this.$t("vr.success"),
        type: "success"
      });

      let r = "/foundation/wap/info";
      if (this.$route.path.indexOf("/fakuma") >= 0) {
        r = "/fakuma/wap/info";
      }
      this.$router.push(r);

      // this.$router.push({
      //   path: "/fakuma/wap/info"
      // });
      // 退出
      // sessionStorage.removeItem("loginInfo");
      // sessionStorage.removeItem("vrToken");
      // this.saveloginInfo("");
      // this.$message({
      //   message: "退出成功",
      //   type: "success"
      // });
      // this.$router.push({
      //   path: "/pc"
      // });
    }
  }
};
</script>

<style lang="scss" scoped>
.wapmain {
  width: 80%;
  margin: 0 auto;
  h1 {
    margin-bottom: 30px;
  }
  .infoUl {
    width: 100%;
    li {
      background: #fff;
      border-radius: 6px;
      border: none;
      -moz-box-shadow: 1px 1px 14px 5px #f0f0f0;
      -webkit-box-shadow: 1px 1px 14px 5px #f0f0f0;
      box-shadow: 1px 1px 14px 5px #f0f0f0;
      padding: 0 15px;
      margin-bottom: 15px;
      font-size: 14px;
      letter-spacing: 1px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      position: relative;
      span {
        color: #d2d5dc;
        width: 80px;
      }
      input {
        border: none;
        padding: 18px 15px;
        width: 90%;
        outline: none;
      }
      .ico {
        width: 5%;
        position: absolute;
        right: 5%;
        top: 33%;
      }
    }
  }
  .btn {
    background: linear-gradient(to right, #ff7f41, #e6007e);
    width: 100%;
    padding: 15px;
    font-size: 14px;
    color: #fff;
    text-align: center;
    border: none;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    margin-top: 30px;
  }
}
</style>